<template>
	<el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">客户</div>
                <el-select v-model="search.custom_id" filterable placeholder="请选择客户" clearable>
                    <el-option v-for="item in customerList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id"/>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="billMaster" stripe remoteSort remoteFilter border @selection-change="selectionChange" :params="query" show-summary>
                <el-table-column type="selection" fixed width="50"></el-table-column>
                <el-table-column label="对账单编号" prop="order_no" align="center"></el-table-column>
                <el-table-column label="客户" prop="referred_as" align="center"></el-table-column>
                <el-table-column label="应收金额" prop="total_money" align="center"></el-table-column>
                <el-table-column label="扣款金额" prop="deduct_money" align="center"></el-table-column>
                <el-table-column label="实收金额" prop="meet_money" align="center"></el-table-column>
                <el-table-column label="状态" prop="send_count" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status!=2" type="danger">未收款</el-tag>
                        <el-tag v-else type="success">已收款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" align="center" prop="create_time"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="80">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="table_collect(scope.row, scope.$index)" v-if="scope.row.status!=2" v-auth="'out.exrport'">收款</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <pay-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></pay-save>
</template>

<script>
import PaySave from './paySave.vue'

export default {
    components: {
        PaySave,
    },
	name: 'user',
	data() {
		return {
            dialog: {
				save: false,
			},
            billMaster: this.$API.inventory.cum.billMaster,
			search: {
				order_no:null,
				custom_id: null,
			},
            query:{
                is_finance: 1,
            },
            applyList:[],
            customerList:[],
		}
	},
	mounted() {
        this.getApply()
        this.getKeHu()
	},
	methods: {
		//添加
		add() {
            this.$router.push({
                path: '/finance/Payment',
            })
		},
        // 付款
        table_collect(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("over").setData(row);
			})
		},
        //搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        //本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'over') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        // 获取客户
        async getKeHu(){
            var res = await this.$API.all.customer.get();
            this.customerList = res.data;
        },
	}
}
</script>

<style lang="scss" scoped>
.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    height: 20px;
    background: transparent;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>
